<template>
  <el-form ref="formRef" :model="bindData" class="demo-ruleForm" :inline="inline" hide-required-asterisk>
    <span v-for="item in itemConfig" :key="item.label" v-show="item.isShow ? item.isShow : true">
      <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules ? item.rules : []"
        :label-width="item.labelWidth ? item.labelWidth : 80 + 'px'">
        <!-- el-input -->
        <el-input v-if="item.type === 'input'" v-model="bindData[item.prop]" :disabled="item.disabled"
          :placeholder="item.placeholder" />
        <!-- el-select 单选 -->
        <el-select v-if="item.type === 'select'" v-model="bindData[item.prop]" :disabled="item.disabled"
          :placeholder="item.placeholder">
          <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
        <!-- el-select 多选 -->
        <el-select v-if="item.type === 'multipleSelect'" multiple collapse-tags collapse-tags-tooltip
          v-model="bindData[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder">
          <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
        <!-- el-input textarea-->
        <el-input v-if="item.type === 'textarea'" v-model="bindData[item.prop]" :disabled="item.disabled"
          :placeholder="item.placeholder" type="textarea" autosize :style="textareaWidth(item.width)" />
        <!-- el-date-picker -->
        <el-date-picker v-if="item.type === 'dateTimePicker'" v-model="bindData[item.prop]" type="datetime" :placeholder="item.placeholder" :format="item.format ? item.format : IValueFormat.default"
          :value-format="item.valueFormat ? item.valueFormat : IValueFormat.default" :editable="false" :default-time="item.defaultTime ? item.defaultTime : []"/>
        <!-- el-color-picker -->
        <el-color-picker v-if="item.type == 'colorPicker'" v-model="bindData[item.prop]" :predefine="item.colorList ? item.colorList : colorList" />
      </el-form-item>
    </span>
  </el-form>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { IItemConfig, formType,IValueFormat } from './type';

interface IProps {
  inline?: boolean;
  bindData: any;
  itemWidth?: number;
  itemConfig: Array<IItemConfig>;
}

const colorList = ['#a393eb', '#ffd3b6', '#a3de83', '#cca8e9', '#70a1d7', '#ffa07a', '#3cb371'];
const props = withDefaults(defineProps<IProps>(), {
  inline: true,
  bindData: () => { },
  itemWidth: 200,
  itemConfig: () => [], //注意!!，withDefaults不能给数组中的元素赋初始值
});
// console.log(props); //可以读到,它是只读的shallowReactive

const textareaWidth = computed(() => {
  return (width: number | undefined) => width ? `width: ${width}px` : '';
})

// console.log(props.itemConfig);

const width = props.itemWidth + 'px';

const formRef = ref();
defineExpose({ formRef });
</script>

<style lang="scss" scoped>
$item-width: v-bind(width);

:deep(.el-input__wrapper) {
  width: $item-width;
}
</style>
